import '@umijs/max';
import React from 'react';
import {
  ModalForm,
  ProForm,
  ProFormDependency,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
import { listInterfaceIdAndNameUsingGet } from '@/services/sutongapi-backend/interfaceInfoController';
import { listInterfaceParamWithTreeUsingGet } from '@/services/sutongapi-backend/interfaceParamController';

export type FormProps = {
  onFinish: (values: API.InterfaceParam) => Promise<void>;
  open: boolean;
  onOpenChange: (visible: boolean) => void;
  title: string;
  initialValues?: API.InterfaceParam;
  interfaceInfoId?: number;
  type?: number;
};

/**
 * 参数字段类型
 */
export const fieldTypes = [
  {
    value: 'string',
    label: 'string',
  },
  {
    value: 'number',
    label: 'number',
  },
  {
    value: 'boolean',
    label: 'boolean',
  },
  {
    value: 'array',
    label: 'array',
  },
  {
    value: 'object',
    label: 'object',
  },
  {
    value: 'date',
    label: 'date',
  },
];
const CreateUpdateForm: React.FC<FormProps> = (props) => {
  const { onFinish, open, onOpenChange, initialValues, title } = props;
  return (
    <ModalForm
      title={title}
      width="760px"
      open={open}
      onOpenChange={onOpenChange}
      initialValues={initialValues}
      onFinish={async (value) => {
        onFinish?.(value);
      }}
      modalProps={{ destroyOnClose: true }}
    >
      <ProForm.Group>
        <ProFormText label="ID" width="sm" name="id" hidden={true} />
        <ProFormSelect
          label="所属接口"
          width="sm"
          name="interfaceInfoId"
          showSearch
          debounceTime={300}
          fieldProps={{
            fieldNames: { label: 'name', value: 'id' },
          }}
          request={async ({ keyWords }) => {
            const res = await listInterfaceIdAndNameUsingGet(keyWords);
            return res.data ?? [];
          }}
          disabled={props.interfaceInfoId === undefined ? false : true}
          initialValue={props.interfaceInfoId}
        />
        <ProFormSelect
          label="类型"
          width="sm"
          name="type"
          options={[
            {
              value: 0,
              label: '请求参数',
            },
            {
              value: 1,
              label: '响应参数',
            },
            {
              value: 2,
              label: '请求头参数',
            },
            {
              value: 3,
              label: '响应头参数',
            },
          ]}
          disabled={props.type === undefined ? false : true}
          initialValue={props.type}
        />
        <ProFormDependency name={['interfaceInfoId', 'type']}>
          {({ interfaceInfoId, type }) => {
            if (interfaceInfoId != null && type != null) {
              return (
                <ProFormTreeSelect
                  label="上级"
                  placeholder="请选择，不选默认为顶级"
                  width="sm"
                  name="pid"
                  fieldProps={{
                    fieldNames: { label: 'name', value: 'id' },
                  }}
                  dependencies={['interfaceInfoId', 'type']}
                  request={async () => {
                    const res = await listInterfaceParamWithTreeUsingGet({ interfaceInfoId, type });
                    return res.data ?? [];
                  }}
                />
              );
            } else {
              return null;
            }
          }}
        </ProFormDependency>
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          label="参数名称"
          rules={[
            {
              required: true,
              message: '参数名称为必填项',
            },
          ]}
          width="sm"
          name="name"
        />
        <ProFormTextArea label="参数说明" width="md" name="description" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          label="参数字段类型"
          rules={[
            {
              required: true,
              message: '参数字段类型为必填项',
            },
          ]}
          width="sm"
          name="fieldType"
          options={fieldTypes}
        />
        <ProFormDependency name={['type']}>
          {({ type }) => {
            return type === 0 || type === 2 ? (
              <ProFormSelect
                label="是否必填"
                width="sm"
                name="required"
                options={[
                  {
                    value: 0,
                    label: '否',
                  },
                  {
                    value: 1,
                    label: '是',
                  },
                ]}
              />
            ) : null;
          }}
        </ProFormDependency>
      </ProForm.Group>
    </ModalForm>
  );
};
export default CreateUpdateForm;
